<template>
  <div v-if="propData">
    <a-row>
      <a-col :span="24" class="hv-visual-property-label">上边框：</a-col>
    </a-row>
    <a-row class="hv-margin-bottom10">
      <a-col :span="24">
        <hv-border-style-input
          v-if="propData && propData.styleProps"
          v-model:value="propData.styleProps.borderTop"
        />
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24" class="hv-visual-property-label">下边框：</a-col>
    </a-row>
    <a-row class="hv-margin-bottom10">
      <a-col :span="24">
        <hv-border-style-input
          v-if="propData && propData.styleProps"
          v-model:value="propData.styleProps.borderBottom"
        />
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24" class="hv-visual-property-label">左边框：</a-col>
    </a-row>
    <a-row class="hv-margin-bottom10">
      <a-col :span="24">
        <hv-border-style-input
          v-if="propData && propData.styleProps"
          v-model:value="propData.styleProps.borderLeft"
        />
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24" class="hv-visual-property-label">右边框：</a-col>
    </a-row>
    <a-row class="hv-margin-bottom10">
      <a-col :span="24">
        <hv-border-style-input
          v-if="propData && propData.styleProps"
          v-model:value="propData.styleProps.borderRight"
        />
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import type DashboardComponentType from "@/visual/commons/types/dashboard-component-type";
import { defineComponent, type PropType, ref, watch } from "vue";
import BorderStyleInput from "../common/BorderStyleInput.vue";

export default defineComponent({
  name: "BorderStyleGroup",
  components: {
    hvBorderStyleInput: BorderStyleInput,
  },
  props: {
    compData: {
      type: Object as PropType<DashboardComponentType<any>>,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    const propData = ref<DashboardComponentType<any>>();

    watch(
      () => props.compData,
      () => {
        propData.value = props.compData;
      },
      { deep: true, immediate: true }
    );

    return {
      propData,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./BorderStyleGroup.less";
</style>
